<template>
  <div style="width: 80%;margin-left: 6%">
    <el-table :data="records" class="table" stripe border>
      <el-table-column prop="serial" label="序号" sortable align="center"></el-table-column>
      <el-table-column prop="date" label="提交答卷时间" align="center"></el-table-column>
      <el-table-column prop="completeTime" label="完成时间" align="center"></el-table-column>
      <el-table-column prop="location" label="城市" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button @click="viewClick(scope.row)">查看</el-button>
          <el-dialog v-model="dialogVisible">
            <paper-view :questions="questions" :time="time"></paper-view>
          </el-dialog>
<!--          <el-button>移除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 15px">
      <el-pagination align="center"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="records.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import PaperView from "./PaperView/PaperView"
export default {
  name: "Download",
  components: {
    PaperView,
  },
  mounted() {
    this.getRecords()
  },
  data() {
    return {
      records: [],
      time: '',
      questions: [],
      dialogVisible: false,
      currentPage: 1,
      total: 20,
      pageSize: 10,
    }
  },
  methods: {
    getRecords() {
      const data = {
        questionnaireId: this.$route.query.questionnaireId
      }
      axios.post('/api/questionnaire/usersRecords', qs.stringify(data)).then((res) => {
        if(res.data.code === 0){
          this.records = res.data.data
          console.log(this.records);
          let index = 1
          this.records.forEach(e => {
            e.serial = index++
            e.location = e.province + e.city
            console.log(e.province);
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    viewClick(row) {
      console.log(row);
      const data = {
        recordId: row.recordId
      }
      axios.post('/api/questionnaire/userRecord', qs.stringify(data)).then((res) => {
        console.log(res);
        if(res.data.code === 0) {
          this.time = res.data.data.time
          this.questions = res.data.data.questions
        } else {
          this.$message.emit(res.data.msg)
        }
      })
      this.dialogVisible = true
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
 .table {
   width: 80%;
   margin-left: 8%;
 }

</style>